<template>
  <a-drawer :width="340" :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
    <template #title> 权限分配 </template>
    <a-tree
      :fieldNames="{
        key: 'id',
        title: 'name',
        children: 'child'
      }"
      :checkable="true"
      v-model:checked-keys="checkedKeys"
      :data="treeData"
    />
  </a-drawer>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { getMenus, deleteRules } from '@/api/system.js'
import { useUserStore } from '@/stores'

const props = defineProps({
  currentInfo: {
    type: Object,
    default: () => {}
  }
})

const userStore = useUserStore()
const visible = ref(false)
const checkStrictly = ref(false)
const treeData = ref([])

//存在的权限
const checkedKeys = []
//获取菜单列表
const getMenuList = async () => {
  let res = await getMenus()
  if (res.code === 200) {
    treeData.value = res.data.list.list
  }
}
getMenuList()

const openDrawer = () => (visible.value = true)
const closeDrawer = () => (visible.value = false)
const handleClick = () => {
  visible.value = true
}
const handleOk = () => {
  visible.value = false
}
const handleCancel = () => {
  visible.value = false
}

watch(
  () => props.currentInfo,
  (val) => {
    if (val.rules && val.rules.length > 0) {
      val.rules.map((item) => {
        checkedKeys.push(item.id)
      })
    }
  },
  { deep: true }
)
defineExpose({
  openDrawer,
  closeDrawer
})
</script>

<style lang="scss" scoped>
</style>